<template>
  <div class="trip">
    <div class="top">
      <div class="top-1">目的地</div>
      <div>
        <el-select size="mini" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick()">
          <el-tab-pane label="用户管理" name="first"></el-tab-pane>
          <el-tab-pane label="配置管理" name="second"></el-tab-pane>
          <el-tab-pane label="角色管理" name="third"></el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="card">
      <el-card class="box-card" v-for="i in 5" :key="i">
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
    </div>
    <div class="card">
      <el-card class="box-card" v-for="i in 5" :key="i">
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </el-card>
    </div>
    <div class="pagination"><el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
    >
    </el-pagination></div>
  </div>
</template>

<script>
export default {
  name: "TripView",
  data() {
    return {
      currentPage1: 1,
      activeName: "first",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
    handleClick() {
      console.log(this.$data.activeName);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  display: flex;
  margin: 10px;
  font-size: 10px;
  line-height: 30px;
  .top-1 {
    margin-right: 20px;
  }
}
.content {
  font-size: 12px;
  .el-tab-pane {
    font-size: 12px;
  }
}
.card {
  display: flex;
  justify-content: space-evenly;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-bottom: 10px;
  width: 200px;
  height: 230px;
}
.pagination{
  margin-top: 20px;
  margin-left: 330px;

}
</style>
